import React from 'react'
import '../assets/styles'
import EditorWarp from "./EditorWarp";
import Dragger from 'react-dragger-r'
import FileTree from "./FileTree";
import store from '../store/index'
import VConsole from 'vconsole'
import IndexService from "../service/IndexService";
import Const from "../Const";

// import ZTreeReact from "./ZTreeReact";
// import {HTML5Backend} from 'react-dnd-html5-backend'
// import {DndProvider} from 'react-dnd'

class Home extends React.Component {
    indexService = new IndexService();
    state = {
        moveX: 0,
        handleDragIng: false,
        treeWidth: 200,
        initTreeWidth: 200,

    }
    editorWarp = null;

    //组件被render之后调用
    componentDidMount() {
        let cb = () => {
            let config = this.indexService.config();
            this.setState({
                treeWidth: config[Const.config_key_init_tree_width],
                initTreeWidth: config[Const.config_key_init_tree_width]
            })
        }
        // window.onPluginReady(cb);
        window.onPluginEnter(cb);
    }

    //组件被移除DOM之后调用
    componentWillUnmount() {

    }

    onDragStart = (e) => {
        this.setState({
            handleDragIng: true
        })
    }
    onMove = (e, x, y) => {
        this.setState({
            moveX: x
        });

    }
    onDragEnd = (e) => {
        let toWidth = this.state.initTreeWidth + this.state.moveX;
        this.indexService.config({
            [Const.config_key_init_tree_width]: toWidth
        });
        this.setState({
            handleDragIng: false,
            treeWidth: toWidth
        })
    }

    devToolsClick = () => {
        new VConsole();
    }

    // onOpenFile = (item) => {
    //     this.editorWarp.openFile(item);
    // }

    // onGetActiveFile = () => {
    //     return this.editorWarp.getActiveFile();
    // }

    render() {
        return (
            <div className='home'>
                <div className='top-warp'></div>
                <div className='content-warp'>
                    <FileTree
                        className='tree-warp'
                        store={store}
                        style={{width: this.state.treeWidth + 'px'}}/>
                    <Dragger className={`drag-handle ${this.state.handleDragIng ? 'active' : ''}`}
                             style={{
                                 'zIndex': `${this.state.handleDragIng ? 11 : 9}`,
                                 left: this.state.initTreeWidth + 'px'
                             }}
                             allowY={false}
                             onMove={this.onMove}
                             onDragStart={this.onDragStart}
                             onDragEnd={this.onDragEnd}>
                        <em></em>
                    </Dragger>
                    <div className='editor-warp' style={{width: `calc(100% - ${this.state.treeWidth}px)`}}>
                        <EditorWarp/>
                    </div>
                </div>
                <div className='state-warp'>
                    <div className='state-left'>
                        优梦软件工作室 - 4um.cn
                    </div>
                    <div className='state-right'>
                        <div className='btn' onClick={this.devToolsClick}>调试</div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Home
